/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: swx  Date: 2019-03-22 Time: 10:00
 *
 * 通用
 *
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity, Modal,
} from 'react-native';
import PropTypes from 'prop-types';
import AntDesign from "react-native-vector-icons/AntDesign"
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant/PHScreen";
import {dispatchOrder,completeOrder,deleteOrder,changeSweepOrderStatus,changeOrderStatus} from "./Actions";
import {FetchStatus} from "../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../configuration/ReturnStatus";
import {doDisplaySuccessMessage, doDisplayWarnMessage} from "../Message/Action";
import connect from "react-redux/es/connect/connect";
import {whskMenuMain} from "../../screen/login/LoginScreen/Actions";
import {COLOR_GRAY_BACKGROUND} from "../../constant/PHColors";

class BottomButtonList extends Component {

    static propTypes = {
        buttonList:PropTypes.object,
        dataSource:PropTypes.object,
        $this:PropTypes.object,
        orderid:PropTypes.string,
        goBack:PropTypes.func,
        toInputReason :PropTypes.func,
        toConsumables :PropTypes.func,
        toEditRemark:PropTypes.func,
    }

    static defaultProps = {
        buttonList: {},
    }

    //构造
    constructor(props) {
        super(props);
        this.state = {
            menuVisible:false, //菜单弹出modal
            checkModalText:'',
            checkModalVisible:false,//确认modal
            alertModalVisible:false,//alert模态
            alertStr:{},
            alertData:{},
        };
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;

        if (nextProps.onChangeSweepOrderStatus !== this.props.onChangeSweepOrderStatus && nextProps.onChangeSweepOrderStatus.fetchStatus === FetchStatus.Success) {
            if (nextProps.onChangeSweepOrderStatus.RETURN === ReturnStatus.Success) {
                doDisplaySuccessMessage(nextProps.onChangeSweepOrderStatus.MSG);
                this.props.dataBack();
                dispatch(whskMenuMain())
            }else if(nextProps.onChangeSweepOrderStatus.RETURN === '-10'){
                this.setState({
                    alertModalVisible:true,
                    alertData:nextProps.onChangeSweepOrderStatus,
                })
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onChangeSweepOrderStatus.MSG))
            }
        }
    }

    render() {
        let {dispatch} = this.props;

        return (
            <View style={styles.bodyBottom}>

                {this.leftButton()}

                {this.rightButton()}

                {/*...菜单*/}
                <Modal
                    visible={this.state.menuVisible}
                    //显示是的动画默认none
                    //从下面向上滑动slide
                    //慢慢显示fade
                    animationType = {'none'}
                    //是否透明默认是不透明 false
                    transparent = {true}
                    //关闭时调用
                    onRequestClose={()=> this.onRequestClose()}
                >
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles.modalContainer}>
                            <View style={styles.modalBox} >
                                {
                                    this.props.buttonList.operation_more.split(',').map((item, index) => {
                                        return this._leftButtomRender(item, index)
                                    })
                                }
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>

                {/*确认模态*/}
                <Modal visible={this.state.checkModalVisible} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()} >
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles.checkmodalContainer} >
                            <View style={styles.checkModalBody}>
                                <View style={styles.checkModalHeader}>
                                    <Text style={styles.checkModalHeaderText}>
                                        确认{this.state.checkModalText}？
                                    </Text>
                                </View>
                                <View style={styles.checkModalCenter}>
                                    <TouchableOpacity  style={styles.checkModalCenterLeft} onPress={()=>{
                                        this.setState({
                                            checkModalVisible:false,
                                        })
                                    }}>
                                        <Text style={{color:'black',fontSize:20}}>
                                            取消
                                        </Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={styles.checkModalCenterRight} onPress={()=>{
                                        this._onSubmitClick(this.state.checkModalText)
                                    }}>
                                        <Text style={{color:'white',fontSize:20}}>
                                            {this.state.checkModalText}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>

                {/*alert-10模态框*/}
                <Modal visible={this.state.alertModalVisible} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()} >
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles.checkmodalContainer} >
                            <View style={styles.checkModalBody}>
                                <View style={styles.checkModalHeader}>
                                    <Text style={styles.checkModalHeaderText}>
                                        {this.state.alertData.MSG}
                                    </Text>
                                </View>
                                <View style={styles.checkModalCenter}>
                                    <TouchableOpacity  style={styles.checkModalCenterLeft} onPress={()=>{
                                        this.setState({
                                            alertModalVisible:false,
                                        })
                                    }}>
                                        <Text style={{color:'black',fontSize:20}}>
                                            取消
                                        </Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={styles.checkModalCenterRight} onPress={()=>{
                                        this.setState({
                                            alertModalVisible:false,
                                        })
                                        let str = this.state.alertStr;
                                        str.arg={};
                                        str.arg[this.state.alertData.checkbox]='yes';
                                        if(this.props.dataSource.whsk_order.ordertype==="赶房"||this.props.dataSource.whsk_order.ordertype==="清洁"){
                                            dispatch(changeSweepOrderStatus(JSON.stringify(str)));
                                        }else{
                                            dispatch(changeOrderStatus(JSON.stringify(str)));
                                        }
                                    }}>
                                        <Text style={{color:'white',fontSize:20}}>
                                            继续
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>

            </View>
        )
    }

    onRequestClose(){
        this.setState({
            menuVisible: false,
            checkModalVisible:false,
            alertModalVisible:false,
        })
    }

    _leftButtomRender=(item, index)=>{
        let _this = this;
        let modalCenterOrBottom = '';
        if(index===this.props.buttonList.operation_more.split(',').length-1){
            modalCenterOrBottom = 'modalBottom'
        }else{
            modalCenterOrBottom = 'modalCenter'
        }
        switch (item) {
            case '更换查房主管': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        _this.onRequestClose();
                        this.props.$this.navigate('ChangeUseridScreen',{"orderid":this.props.orderid,"text":"更换查房主管","page":'RoomStatusScreen',goBack:()=>{
                                _this.props.dataBack();
                            }});
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                更换查房主管
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '更换清洁人': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        _this.onRequestClose();
                        this.props.$this.navigate('ChangeUseridScreen',{"orderid":this.props.orderid,"text":"更换清洁人","page":'RoomStatusScreen',goBack:()=>{
                                _this.props.dataBack();
                        }});
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                更换清洁人
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '更换处理人': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        _this.onRequestClose();
                        let ordertype=this.props.dataSource.whsk_order.ordertype
                        this.props.$this.navigate('ChangeUseridScreen',{"orderid":this.props.orderid,"text":"更换处理人","ordertype":ordertype,"page":'RoomStatusScreen',goBack:()=>{
                                _this.props.dataBack();
                            }});
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                更换处理人
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '无需清洁': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        _this.onRequestClose();
                        this.props.$this.navigate('CancelSweepOrderScreen',{"orderid":this.props.orderid,"page":'RoomStatusScreen',goBack:()=>{
                                _this.props.dataBack();
                            }});
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                无需清洁
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '无法检查': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        _this.onRequestClose();
                        this.props.$this.navigate('CancelCheckOrderScreen',{"orderid":this.props.orderid,"page":'RoomStatusScreen',goBack:()=>{
                                _this.props.dataBack();
                            }});
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                无法检查
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            default : {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        _this.onRequestClose();
                        let text = item;
                        this.showModal(text);
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                {item}
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
        }
    };

    leftButton=()=>{
        if(this.props.buttonList.operation_more!=="" && this.props.buttonList.operation_more.split(',').length>0){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                    this.setState({
                        menuVisible:true,
                    })
                }}>
                    <View style={styles.bodyBottomLeft}>
                        <Text style={styles.cellTitleText}>
                            <AntDesign name={'ellipsis1'} size={25} style={{color: 'white'}}/>
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else{
            return(
                <View style={{width:SCREEN_WIDTH/8}}>
                </View>
            )
        }
    };

    rightButton=()=>{
        console.log("..............."+JSON.stringify(this.props.buttonList))
        if(this.props.buttonList.operation!==""){
            if(this.props.buttonList.operation.split(",").length===1){
                return(
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        let buttonName = this.props.buttonList.operation.split(",")[0];
                        this.rightButtonOperate(buttonName)
                    }}>
                        <View style={styles.bodyBottomRight}>
                            <Text style={styles.cellTitleText}>
                                {this.props.buttonList.operation.split(",")[0]}
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }else if(this.props.buttonList.operation.split(",").length===2){
                return(
                    <View style={styles.bodyBottomRightDouble}>
                        <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                            let buttonName = this.props.buttonList.operation.split(",")[0]
                            this.rightButtonOperate(buttonName)
                        }}>
                            <View style={styles.bodyBottomRightL}>
                                <Text style={styles.cellTitleText}>
                                    {this.props.buttonList.operation.split(",")[0]}
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                            let buttonName = this.props.buttonList.operation.split(",")[1]
                            this.rightButtonOperate(buttonName)
                        }}>
                            <View style={styles.bodyBottomRightR}>
                                <Text style={styles.cellTitleText}>
                                    {this.props.buttonList.operation.split(",")[1]}
                                </Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                )
            }
        }

    };

    rightButtonOperate = (buttonName) =>{
        switch (buttonName) {
            case '不通过检查': {
                this.props.$this.navigate('OrderFailedScreen',{"orderid":this.props.orderid,"page":'RoomStatusScreen',goBack:()=>{
                        this.props.dataBack();
                    }})
                return
            }
            default:{
                this.setState({
                    checkModalText:buttonName,
                    checkModalVisible:true,
                })
            }
        }
    };

    showModal=(text)=>{
        this.setState({
            checkModalText:text,
            checkModalVisible:true,
        })
    };

    //完成
    _onSubmitClick = (value)=>{
        this.onRequestClose();
        let {dispatch} = this.props;


        if(this.props.dataSource.whsk_order.ordertype==="赶房"||this.props.dataSource.whsk_order.ordertype==="清洁"){
            let str = {"whsk_Order_Sweep_event":{"orderid":this.props.orderid},"whsk_Order_event":{"operation":value}}
            this.state.alertStr = str;
            dispatch(changeSweepOrderStatus(JSON.stringify(str)));
        }else{
            let str1 = {"whsk_Order_event":{"orderid":this.props.orderid,"operation":value}}
            this.state.alertStr = str1;
            dispatch(changeOrderStatus(JSON.stringify(str1)));
        }
    }

}


const props = state => {
    return {
        onChangeSweepOrderStatus:state.onChangeSweepOrderStatus,
    }
}

export default BottomButtonList = connect(props)(BottomButtonList);


const styles = StyleSheet.create({

    bodyBottom:{
        height:40,
        width:SCREEN_WIDTH,
        bottom:5,
        alignItems:'center',
        justifyContent:'flex-start',
        position:'absolute',
        backgroundColor:COLOR_GRAY_BACKGROUND,
        flexDirection:'row'
    },

    bodyBottomLeft:{
        marginLeft:SCREEN_WIDTH/24,
        marginRight:SCREEN_WIDTH/24,
        width:SCREEN_WIDTH/8,
        backgroundColor:'#6f6f6f',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRight:{
        width:SCREEN_WIDTH*6/8,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRightDouble:{
        width:SCREEN_WIDTH*6/8,
        height:40,
        flexDirection: 'row',
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRightL:{
        width:SCREEN_WIDTH*1/3,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRightR:{
        marginLeft:SCREEN_WIDTH/24,
        width:SCREEN_WIDTH*1/3,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    cellTitleText: {
        fontSize: 20,
        color: '#ffffff',
        marginBottom: 1,
        textAlign:'center',
    },

    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0)'
    },

    modalBox:{
        alignItems:'center',
        backgroundColor:'white',
        width: 120,
        borderRadius:10,
        borderWidth:1,
        borderColor:'#b2b2b2',
        bottom: 55,
        position:'absolute',
        marginLeft:SCREEN_WIDTH/24,
    },

    modalTitleText:{
        fontSize:17,
        color:'black',
    },

    modalCenter:{
        borderBottomColor:'#b2b2b2',
        borderBottomWidth:1,
        height:40,
        width:120,
        alignItems:'center',
        justifyContent:'center',
    },

    modalBottom:{
        height:40,
        width:120,
        alignItems:'center',
        justifyContent:'center',
    },

    checkmodalContainer:{
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },

    checkModalBody:{
        top:(SCREEN_HEIGHT-100)/2,
        height: 100,
        left:40,
        width:SCREEN_WIDTH - 80,
        backgroundColor:'white',
        borderRadius:3,
    },

    checkModalHeaderText: {
        fontSize: 22,
        color: '#2f67ff'
    },

    checkModalHeader: {
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
    },

    checkModalCenter:{
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'row'
    },

    checkModalCenterLeft:{
        flex:1,
        height: 44,
        margin: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#cecece'
    },

    checkModalCenterRight:{
        flex:1,
        height: 44,
        margin: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#2f67ff'
    },
})